<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <title>农产品商城</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/css/proList.css"/>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>

</head>
<body>
<!------------------------------head------------------------------>
<div th:replace="header :: html"></div>
<!-------------------------banner--------------------------->
<div class="block_home_slider">
    <div id="home_slider" class="flexslider">
        <ul class="slides"  th:each="ads : ${bad}">

            <li>
                <div class="slide">
                    <img th:src="${ads.path}">
                </div>
            </li>
        </ul>
    </div>
</div>

<!------------------------------thImg------------------------------>

<!------------------------------news------------------------------>
<!--商品列表-->
<div class="paintCon">
    <section class="wrapper">
        <div class="paintList">
            <li th:each="random : ${randomItem}">
                <a th:href="@{'/details/'+${random.id}}">
                    <dl>
                        <dt><img th:src="${random.itemImage}"></dt>
                        <dd th:text="${random.itemTitle}"></dd>
                        <dd th:text="'￥'+${random.itemPrice}"></dd>
                    </dl>
                </a>
            </li>
        </div>
    </section>
</div>

<!------------------------------ad 中间广告------------------------------>
<!--<a href="javascript:void(0)" class="ad"><img src="/img/ib1.jpg"/></a>-->
<div class="block_home_slider">
    <div id="home_slider2" class="flexslider">
        <ul class="slides"  th:each="adsm : ${badsm}">

            <li>
                <div class="slide">
                    <img th:src="${adsm.path}">
                </div>
            </li>
        </ul>
    </div>
</div>
<!------------------------------people------------------------------>
<ul class="proList wrapper clearfix">
    <li th:each="hobby : ${hobbyAndrecommend}">
        <a th:href="@{'/details/'+${hobby.id}}">
            <dl>
                <dt><img th:src="${hobby.itemImage}"></dt>
                <dd th:text="${hobby.itemTitle}"></dd>
                <dd th:text="${hobby.itemPrice}"></dd>
            </dl>
        </a>
        <p class="quick" style="border: 1px solid #000;display: none;" th:onclick="echobzproList([[${hobby.id}]])">
            快速浏览</p>
    </li>
</ul>
<div class="mask"></div>
<!--mask内容-->
<div id="echoDetails"></div>
<!--返回顶部-->
<div th:replace="gotop :: html"></div>

<!-------------------login-------------------------->
<!--footer-->
<div th:replace="footer :: html"></div>

<script src="/js/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/nav.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/pro.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/cart.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(function () {
        $('#home_slider').flexslider({
            animation: 'slide',
            controlNav: true,
            directionNav: true,
            animationLoop: true,
            slideshow: true,
            slideshowSpeed: 4000,
            useCSS: false
        });
        $(".flex-direction-nav").hide();
    });
</script>

<script type="text/javascript">
    $(function () {
        $('#home_slider2').flexslider({
            animation: 'slide',
            controlNav: true,
            directionNav: true,
            animationLoop: true,
            slideshow: true,
            slideshowSpeed: 5000,
            useCSS: false
        });
        $(".flex-direction-nav").hide();
    });
</script>
<script>
    var title;
    var price;

    function echobzproList(item_id) {
        var echoDetails = '';
        $.get("/Ajaxdetails", {"item_id": item_id}, function (data) {
            title = data.details.itemDetailsTitle;
            price = data.details.itemDetailsPrice;
            var smallImage = '';
            for (var i = 0; i < data.smallList.length; i++) {
                smallImage += '<p class="fl" onclick="getSmallid(' + data.smallList[i].itemSmallId + ')"><img src=' + data.smallList[i].itemSmallImage + ' alt=' + data.smallList[i].itemSmallAlt + ' class=' + data.smallList[i].itemSmallImage + '></p>\n';
            }
            var bigImage = '';
            for (var i = 0; i < data.bigList.length; i++) {
                bigImage += '<img  src="' + data.bigList[i].itemBigImage + '" class="' + data.bigList[i].itemBigImage + '">';
            }

            echoDetails += '<div class="proDets">\n' +
                '        <img class="off" src="/img/temp/off.jpg" />\n' +
                '        <div class="tit clearfix">\n' +
                '            <h4 class="fl">' + data.details.itemDetailsTitle + '</h4>\n' +
                '            <span class="fr">￥' + data.details.itemDetailsPrice + '</span>\n' +
                '        </div>\n' +
                '        <div class="proCon clearfix">\n' +
                '            <div class="proImg fl">\n' +
                '                <img class="list" src="' + data.smallList[0].itemSmallImage + '" style="width: 360px;height: 360px;" />\n' +
                '                <div class="smallImg clearfix" id="bigImage" style="width: 400px;">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="fr">\n' +
                '                <div class="proIntro">\n' +
                '                    <p>所选商品</p>\n' +
                '                    <div class="smallImg clearfix categ" style="width: 400px;">\n' +
                '                    </div>\n' +
                '                    <p>数量&nbsp;&nbsp;库存<span>' + data.details.itemDetailsCount + '</span>件</p>\n' +
                '                    <div class="num clearfix">\n' +
                '                        <img class="fl sub" src="/img/temp/sub.jpg">\n' +
                '                        <span class="fl" contentEditable="true">1</span>\n' +
                '                        <img class="fl add" src="/img/temp/add.jpg">\n' +
                '                        <p class="please fl">请选择商品属性!</p>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="btns clearfix" style="margin-top: 20px;">\n' +
                '                    <a href="javascript:void(0)"><p class="buy fl">立即购买</p></a>\n' +
                '                    <a href="javascript:void(0)"><p class="cart fr">加入购物车</p></a>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '        <a class="more" href="/details/' + data.details.itemDetailsItemid + '">查看更多细节</a>\n' +
                '    </div>';
            $("#echoDetails").html(echoDetails);
            $(".categ").html(smallImage);
            $("#bigImage").html(bigImage);
            $(".proDets").show();
            $(".mask").show();
        })
    }


    var small_id;

    function getSmallid(id) {
        small_id = id;
    }

    //加入购物车
    $("#echoDetails").on("click", ".btns .cart", function () {
        if ($(".categ p").hasClass("on")) {
            var count = $(".num span.fl").html();
            var image = $(".on img").attr("src");
            var Classify = $(".on img").attr("alt");
            var subtotal = count * price;
            $.ajax({
                type: 'POST',
                url: "/cart/add",
                data: {
                    "small_id": small_id,
                    "cartTitle": title,
                    "cartClassify": Classify,
                    "cartImage": image,
                    "cartPrice": price,
                    "cartCount": count,
                    "cartSubtotal": subtotal
                },
                // dataType: "json",
                success: function (response) {
                    if (response) {
                        cartSelect();
                    } else {
                        alert(response.message);
                    }
                },
                error: function (response) {
                    alert(response.message);
                }
            });
        }
    });
</script>
</body>
</html>
